<template>
  <div>
    <div class="selectContent">
      <div class="title1">器官: </div>
      <el-select v-model="value1" placeholder="请选择" class="width280">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <div></div>
      <div class="title1">数据类型: </div>
      <el-select v-model="value2" placeholder="请选择" class="width280" @change="selectTrigger(value2)">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <div></div>
      <el-switch
        id="switch-container"
        v-model="valueSwitch"
        class="switchClass"
        active-text="饼图"
        inactive-text="折线图"
        :disabled = "switchAble == 1"
      >
      </el-switch>
      <el-button
        size="medium"
        type="primary"
        @click="startLineChart"
        style="float:right;margin-left: 10px;font-size:16px"
      >查看
      </el-button>
    </div>
    <div id="echarts-container" name="echarts1" class="charts" ref="PeopleRef" style="width: 1500px;height:700px;"></div>
    <div id="echarts-container1" class="charts" ref="PeopleRef1" style="width: 1500px;height:700px;"></div>
  </div>
</template>

<script>
import axios from "axios";
import svg from "../../static/people.svg";

export default {
  name: "showAllResult",
  data() {
    return {
      valueSwitch: false,
      options1: [{
        value: '选项1',
        label: '脾脏'
      }, {
        value: '选项2',
        label: '右肾'
      }, {
        value: '选项3',
        label: '左肾'
      }, {
        value: '选项4',
        label: '胆囊'
      }, {
        value: '选项5',
        label: '食道'
      }, {
        value: '选项6',
        label: '肝脏'
      }, {
        value: '选项7',
        label: '胃'
      }, {
        value: '选项8',
        label: '主动脉'
      }, {
        value: '选项9',
        label: '后腔静脉'
      }, {
        value: '选项10',
        label: '胰腺'
      }, {
        value: '选项11',
        label: '膀胱'
      }],
      value1: '',
      options2: [{
        value: '选项1',
        label: 'X Y Z方向范围'
      }, {
        value: '选项2',
        label: '器官中心点坐标(X,Y,Z)'
      }, {
        value: '选项3',
        label: '半径(X,Y,Z)'
      }, {
        value: '选项4',
        label: '直径(X,Y,Z)'
      }, {
        value: '选项5',
        label: '最大横断面切片在下标(Z方向)'
      }, {
        value: '选项6',
        label: '最大横断面积(Z方向)'
      }, {
        value: '选项7',
        label: '最大横断面的最大外接矩形长宽度(Z方向)'
      }, {
        value: '选项8',
        label: '器官体积'
      }],
      value2: '',
      options:{
        // title: {
        //   text: 'Stacked Line'
        // },
        tooltip: {
          trigger: 'axis'
        },
        // legend: {
        //   data:  ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['No1', 'No2', 'No3', 'No4', 'No5', 'No6', 'No7', 'No8', 'No9', 'No10']
        },
        yAxis: {
          type: 'value'
        },
        series: [
        ]
      },
      options3: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      },
      myChart: null,
      myChart1: null,
      organData: [],
      switchAble: 2,
    }
  },
  mounted() {
      axios.get(svg)
        .then(response => {
          // const svgText = response.data;
          // this.$echarts.registerMap('organ_diagram', {svg: svgText});
          this.initEcharts()
          this.registerEcharts();
        })
        .catch(error => {
          // console.error('Failed to fetch SVG:', error);
        });
      this.loadData()
  },
  methods: {
    loadData() {
      axios.get('/search_organ')
      .then(response => {
        this.organData = response.data;
      })
    },
    initEcharts() {
      this.myChart = this.$echarts.init(this.$refs.PeopleRef)
      // this.$echarts.registerMap('organ_diagram', { svg: svg });
      // 指定图表的配置项和数据
      var option = this.options
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
      // this.myChart.off('mouseover');
      // this.myChart.off('mouseout');
      this.myChart1 = this.$echarts.init(this.$refs.PeopleRef1)
      // this.$echarts.registerMap('organ_diagram', { svg: svg });
      // 指定图表的配置项和数据
      var option1 = this.options3
      // 使用刚指定的配置项和数据显示图表。
      this.myChart1.setOption(option1);
      var ui =document.getElementById("echarts-container");
      var ui1 =document.getElementById("echarts-container1");
      ui.style.display = 'block'
      ui1.style.display = 'none'
    },
    registerEcharts() {
      this.option && this.myChart.setOption(option);
      this.option3 && this.myChart1.setOption(option1);
    },
    startLineChart() {
      var index1 = this.value1[2]
      var index2 = this.value2[2]
      var number = this.organData.length
      var xAxisdata = []
      for (var i = 0; i < number; i++) {
        xAxisdata.push("No" + (i + 1).toString())
      }
      var legenddata = [
        ['X轴下限', 'X轴上限', 'Y轴下限', 'Y轴上限', 'Z轴下限', 'Z轴上限'],
        ['器官中心点X轴坐标', '器官中心点Y轴坐标', '器官中心点Z轴坐标'],
        ['X轴半径', 'Y轴半径', 'Z轴半径'],
        ['X轴直径', 'Y轴直径', 'Z轴直径'],
        ['最大横断面切片在下标 (Z方向)'],
        ['最大横断面积(Z方向)'],
        ['最大横断面的最大外接矩阵长度(Z方向)', '最大横断面的最大外接矩阵宽度(Z方向)'],
        ['器官体积'],
      ]
      var dataName = ['label', 'range', 'center', 'radius', 'diameter', 'biggest_area_index', 'biggest_area', 'biggest_area_shape', 'volume']
      var seriesList = []
      for (var i = 0; i < legenddata[index2 - 1].length; i++) {
        var dataList = []
        for (var j = 0; j < number; j++) {
          var birenindex = j
          var qigaunindex = index1 - 1
          var shujuindex = dataName[index2]
          var data = this.organData[birenindex][qigaunindex][shujuindex]
          if (['biggest_area_index', 'biggest_area', 'volume'].includes(shujuindex)) {
            dataList.push(Number(data))
          } else if (['biggest_area_shape', 'radius', 'diameter', 'center'].includes(shujuindex)) {
            data = data.split('[')[1].split(']')[0]
            dataList.push(Number(data.split(',')[i]))
          } else if (['range'].includes(shujuindex)) {
            data = data.slice(2, -2)
            if (i == 0 || i == 5) {
              dataList.push(Number(data.split(',')[i]))
            } else if (i == 1 || i == 3) {
              dataList.push(Number(data.split(',')[i].split(']')[0]))
            } else if (i == 2 || i == 4) {
              dataList.push(Number(data.split(',')[i].split('[')[1]))
            }
          }
        }

        var temp = {
          name: legenddata[index2 - 1][i],
          type: 'line',
          stack: 'Total',
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          data: dataList
        }
        seriesList.push(temp)
      }
      // console.log(seriesList)

      if(this.valueSwitch == false) {
        var ui =document.getElementById("echarts-container");
        var ui1 =document.getElementById("echarts-container1");
        if(ui.style.display === 'none'){
          ui.style.display = 'block'
        }
        if(ui1.style.display === 'block'){
          ui1.style.display = 'none'
        }
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxisdata
          },
          yAxis: {
            type: 'value'
          },
          legend: {
            data: legenddata[index2 - 1]
          },
          series: seriesList
        }
        this.myChart.clear()
        this.myChart.setOption(option);
      }
      else {
        var ui =document.getElementById("echarts-container");
        var ui1 =document.getElementById("echarts-container1");
        if(ui.style.display === 'block'){
          ui.style.display = 'none'
        }
        if(ui1.style.display === 'none'){
          ui1.style.display = 'block'
        }

        var seriesListop = []
        for(var i = 0; i < seriesList[0].data.length; i++) {
          seriesListop.push({
            value: seriesList[0].data[i],
            name: "No" + (i + 1).toString()
          })
        }
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: seriesListop
            }
          ]
        }
        this.myChart1.setOption(option);
      }
    },
    selectTrigger(val) {
      this.valueSwitch = false
      var index2 = this.value2[2]
      if(index2 == 8 || index2 == 5 || index2 == 6 ) {
        this.switchAble = 2
      }
      else{
        this.switchAble = 1
      }
    },
  }
}
</script>

<style scoped>
.selectContent {
  margin-left: 40px;
  display: grid;
  widht:300px;
  grid-template-columns: 100px 200px 150px 100px 320px 100px 200px 100px;
}
.title1{
  font-size: 16px;
  align-content: center;
  text-align: right;
  margin-top: 7px;
  margin-right: 4px;
}
.charts{
  margin: auto;
  margin-top: 30px;
}
.switchClass{
  margin-top: 10px;
}
.width280{
  width: 280px;
}
</style>
